<template>
    <div class="content">
        <!-- 详情1 -->
        <div class="explainOne">
            <div class="title"></div>
            <div class="text">
                <div class="section">
                    近日，LEXUS雷克萨斯正式宣布2022全球设计大奖最高奖得主，Poh Yun Ru所创作的“记忆倒带（Rewind）”从57个国家和地区的选手提交的1,726项参赛作品中脱颖而出，摘得2022第十届
                    LEXUS雷克萨斯全球设计大奖最高奖桂冠。“记忆倒带（Rewind）”旨在通过先进科技，为失智老人等受记忆力障碍困扰的人群提供帮助，帮助他们唤醒记忆，构建更美好的未来。
                </div>
                <div class="section">
                    LEXUS雷克萨斯全球设计大奖最高奖得主Poh Yun
                    Ru表示：“我希望‘记忆倒带（Rewind）’能帮助更多人改善他们的生活，我非常感激LEXUS雷克萨斯全球设计大奖让我离这个目标又近了一步。能够获此殊荣，离不开大家给予的巨大支持，包括我的导师、团队内的工程师、程序员、医疗保健专家以及参与这一项目的广大用户。LEXUS雷克萨斯全球设计大奖让我们有机会将创意过程转化为实际的产品，这非常了不起。能与世界各地充满激情的设计师相聚于此，相互交流学习，令我备受鼓舞。这是一场意义深远、充满启迪的创意之旅，我很高兴能够通过创意与设计和大家一起构建更美好的未来。”
                </div>
            </div>
            <div class="img"></div>
        </div>
        <!-- 详情2 -->
        <div class="explainTwo">
            <div class="text">
                LEXUS雷克萨斯全球设计大奖不同于其他设计赛事，6位决赛入围选手将接受4位蜚声国际的专业导师亲自指导。备受尊敬的精英导师们来自不同行业背景和专业领域，与决赛入围选手进行一对一的沟通交流，选手们将基于导师们的个性化设计指导，充分激发各自的创意潜能，精心打造并持续完善各自的原型设计作品。
            </div>
            <div class="text">
                LEXUS雷克萨斯全球设计大奖已连续举办九届，共呈现90件独具创意的作品，为139名独立设计师和设计团队提供了展示各自才华和天赋的广阔平台。参赛者均致力于借助设计的力量，构建更美好未来。
            </div>
            <div class="theme">雷克萨斯全球设计大奖赛历程</div>
            <div class="writing">经过筛选在2021年12月最终确定6名入围者，他们将与指定的导师一起设计原型作品参加大奖赛评选活动，随后宣布大奖赛冠军。完整的计划时间表如下。</div>
        </div>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
.content {
    width: 90%;
    height: 1270px; //先设置高度
    margin: 0 auto;
    // 详情1
    .explainOne {
        margin-top: 200px;
        display: flex;
        justify-content: center;
        .title {
            width: 11%;
            height: 160px;
            margin-right: 40px;
            background: url(../../assets/image/lda-biglogo.png);
            background-size: 100% 100%;
        }
        .text {
            width: 20%;
            height: 528px;
            margin-right: 40px;
            .section {
                margin-bottom: 30px;
                font-family: Nobel-Regular;
                font-size: 16px;
                font-weight: normal;
                line-height: 25px;
                text-align: justify; /* 浏览器可能不支持 */
                letter-spacing: 0em;
                color: #3d3d3d;
            }
        }
        .img {
            width: 65%;
            height: 550px;
            background: url(../../assets/image/image.png);
            background-size: 100% 100%;
        }
    }
    // 详情2
    .explainTwo {
        width: 71%;
        height: 20px;
        margin: 0 auto;
        margin-top: 200px;
        .text {
            color: #3d3d3d;
            font-family: LEXUS-HeiS-Bold-U;
            font-size: 16px;
            font-weight: normal;
            line-height: 30px;
            text-align: center;
            letter-spacing: 0em;
        }
        .theme {
            width: 42%;
            height: 65px;
            margin: 0 auto;
            margin-top: 180px;
            font-family: LEXUS-HeiS-Bold-U;
            font-size: 36px;
            font-weight: normal;
            letter-spacing: 0em;
            text-align: center;

            /* 黑 */
            color: #262626;
        }
        .writing {
            width: 100%;
            height: 65px;
            margin: 0 auto;
            margin-top: 70px;
            font-family: Nobel-Regular;
            font-size: 16px;
            font-weight: normal;
            letter-spacing: 0em;
            color: #3d3d3d;
            text-align: center;
        }
    }
}
// 媒体查询
@media screen and (max-width: 1400px) {
    .content .explainOne .title {
        width: 10%;
        height: 110px;
        margin-right: 35px;
    }
    .content .explainOne .text .section {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 20px;
    }
    .content .explainOne .img {
        width: 70%;
        height: 430px;
    }
    .content .explainTwo .theme {
        width: 60%;
    }
    .content .explainTwo .writing {
        margin-top: 70px;
    }
}
@media screen and (max-width: 1200px) {
    .content .explainOne .title {
        width: 8%;
        height: 100px;
        margin-right: 30px;
    }
    .content .explainOne .text .section {
        margin-bottom: 15px;
        font-size: 12px;
        line-height: 18px;
    }
    .content .explainOne .img {
        width: 65%;
        height: 395px;
    }
    .content .explainTwo {
        margin-top: 100px;
    }
    .content .explainTwo .theme {
        width: 70%;
        margin-top: 100px;
    }
    .content .explainTwo .writing {
        margin-top: 70px;
    }
}
@media screen and (max-width: 900px) {
    .content .explainOne {
        margin-top: 100px;
        display: flow-root;
    }
    .content .explainOne .title {
        width: 20%;
        height: 120px;
        margin: 0 auto;
        margin-bottom: 40px;
    }
    .content .explainOne .text {
        width: 100%;
        height: 200px;
    }
    .content .explainTwo .text {
        font-size: 15px;
        line-height: 25px;
    }
    .content .explainOne .img {
        width: 100%;
        height: 360px;
    }
    .content .explainTwo {
        margin-top: 60px;
    }
    .content .explainTwo .theme {
        width: 86%;
        margin-top: 60px;
        font-size: 32px;
    }
    .content .explainTwo .writing {
        margin-top: 40px;
        font-size: 14px;
    }
}
@media screen and (max-width: 600px) {
    .container {
        height: 700px;
    }
    .content .explainOne .title {
        width: 35%;
        height: 130px;
    }
    .content .explainOne .text {
        height: 260px;
    }
    .content .explainOne .img {
        height: 300px;
    }
    .content .explainTwo {
        width: 100%;
    }
    .content .explainTwo .theme {
        width: 92%;
    }
}
@media screen and (max-width: 500px) {
    .content {
        height: 1100px;
    }
    .content .explainTwo .theme {
        width: 92%;
        font-size: 30px;
    }
    .content .explainOne {
        margin-top: 50px;
    }
    .content .explainOne .title {
        height: 120px;
    }
    .content .explainOne .text {
        height: 280px;
    }
    .content .explainOne .img {
        height: 230px;
    }
    .content .explainTwo {
        margin-top: 50px;
    }
    .content .explainTwo .text {
        line-height: 20px;
        font-size: 12px;
    }
    .content .explainTwo .theme {
        margin-top: 70px;
        width: 87%;
        font-size: 28px;
    }
    .content .explainTwo .writing {
        font-size: 12px;
    }
}
@media screen and (max-width: 390px) {
    .content {
        height: 1100px;
    }
    .content .explainOne .text .section {
        line-height: 14px;
    }
    .content .explainOne {
        margin-top: 50px;
    }
    .content .explainOne .title {
        width: 35%;
        height: 100px;
    }
    .content .explainOne .img {
        height: 200px;
    }
    .content .explainTwo {
        margin-top: 50px;
    }
    .content .explainTwo .text {
        font-size: 12px;
        line-height: 18px;
    }
    .content .explainTwo .theme {
        margin-top: 50px;
        width: 80%;
        font-size: 20px;
    }
    .content .explainTwo .writing {
        margin-top: 20px;
        font-size: 12px;
    }
}
</style>
